<template>
  <div class="card-line">
    <div class="wrap">
      <div class="chart">
        <apexchart
          type="line"
          height="300"
          :options="chartOptions"
          :series="series"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { operateTotal } from "@/api/index";
var zh = require("../../../libs/zh.json");
export default {
  name: "line",
  components: {},
  props: {
    timeSearch: {
      type: Object,
    },
  },
  data() {
    return {
      series: [
        {
          name: "",
          data: [],
        },
      ],
      chartOptions: {},
    };
  },
  methods: {
    init() {
      if (typeof this.timeSearch.startDate == "undefined") {
        return false;
      }
      // 运营报告-货源、订单、运单总统计
      this.dataArr = [];
      this.goods = [];
      this.order = [];
      this.entrusted = [];
      operateTotal(this.timeSearch).then((res) => {
        res.result.forEach((item) => {
          if (typeof item.days == "undefined") {
            item.days = "";
          }
          if (typeof item.goods_num == "undefined") {
            item.goods_num = "0";
          }
          if (typeof item.order_num == "undefined") {
            item.order_num = "0";
          }
          if (typeof item.order_num == "undefined") {
            item.order_num = "0";
          }
          this.dataArr.push(item.days);

          this.goods.push(item.goods_num);

          // this.order.push(item.order_num);
          // this.entrusted.push(item.entrusted_num);
          this.order.push(item.entrusted_num);
          this.entrusted.push(item.order_num);
        });
        (this.chartOptions = {
          chart: {
            stacked: false,
            toolbar: {
              show: false,
            },
            locales: [zh],
            defaultLocale: "zh",
          },
          stroke: {
            width: [0, 2, 4],
            curve: "smooth",
          },
          plotOptions: {
            bar: {
              columnWidth: "50%",
            },
          },
          fill: {
            opacity: [0.85, 0.25, 1],
            gradient: {
              inverseColors: false,
              shade: "light",
              type: "vertical",
              opacityFrom: 0.85,
              opacityTo: 0.55,
              stops: [0, 100, 100, 100],
            },
          },
          markers: {
            size: 0,
          },
          xaxis: {
            labels: {
              show: true,
              rotate: -45, //倾斜角度
              rotateAlways: true, //是否旋转倾斜
              hideOverlappingLabels: true, //是否隐藏重叠
              showDuplicates: false,
              formatter: function (value) {
                return value;
              },
            },

            categories: this.dataArr,
          },
          yaxis: {
            min: 0,
          },
          tooltip: {
            shared: true,
            intersect: false,
            y: {
              formatter: function (val) {
                return +val + " 单"; //名称
              },
            },
          },
          dataLabels: {
            enabled: false,
          },
          legend: {
            offsetY: 5,
          },
        }),
          (this.series = [
            {
              name: "货源",
              type: "column",
              data: this.goods,
            },
            {
              name: "订单",
              type: "area",
              data: this.order,
            },
            {
              name: "运单",
              type: "line",
              data: this.entrusted,
            },
          ]);
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less">
.card-line {
  .ivu-card-head {
    border-bottom: none !important;
  }
  .card-title {
    font-size: 14px;
    color: #67757c;
  }
  .wrap {
    height: 310px;
    border: 1px solid #eee;
    // padding: 10px;
    .text {
      padding: 1rem;
      text-align: center;
      color: #67757c;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      h6 {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        line-height: 1.2;
      }
      h3 {
        font-size: 1.3125rem;
        margin-bottom: 0.5rem;
        font-weight: 400;
        line-height: 1.2;
      }
    }
  }
}
</style>